上次我們使用自定義模塊來寫了簡易的加減乘除功能,今天我把它變的實際可以操作,我使用了express模組處理後端,再透過html、css以及javascript來處理前端。
首先建立 Node.js 應用程式入口檔案:建立一個名為 "app.js" 的 Node.js 檔案,該檔案將作為應用程式的進入點。在這個檔案中,我們引入 Express.js 並建立一個 Express 應用程式,設定靜態檔案目錄("public" 資料夾)以提供前端資源,並設置一個路由來處理根路徑的 GET 要求。最後,我們在埠口 3000 上啟動伺服器。
建立前端界面:在 "public" 資料夾中建立一個 "index.html" 檔案,該檔案包含了 Web 計算機的前端使用者介面。它包括一個標題、一個用於顯示計算機輸入和輸出的文字框,以及數字和運算符按鈕。每個按鈕都帶有一個 "onclick" 事件處理程序,用於回應使用者的點擊操作。
JavaScript 互動:在 "index.html" 檔案中,我們使用 JavaScript 處理使用者的輸入並顯示計算結果。以下是 JavaScript 函數的作用:
addToDisplay(value):當使用者點擊數字按鈕或運算符按鈕時,將按鈕上的值附加到文字框的值上。
clearDisplay():清除文字框的內容。
calculate():嘗試使用 JavaScript 的 "eval" 函數執行文字框中的表達式,然後將結果顯示在文字框中。如果出現錯誤,將顯示 "Error"。
最後啟動伺服器:使用 "node app.js" 命令啟動 Node.js 伺服器,該伺服器將在 http://localhost:3000 上運行。
app.js:
const express = require('express');
const app = express();
const path = require('path');
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
前端部分:
<!DOCTYPE html>
<html>
<head>
<title>Web Calculator</title>
</head>
<body>
<h1>Web Calculator</h1>
<input type="text" id="display" disabled>
<div>
<button onclick="addToDisplay('7')">7</button>
<button onclick="addToDisplay('8')">8</button>
<button onclick="addToDisplay('9')">9</button>
<button onclick="addToDisplay('+')">+</button>
</div>
<div>
<button onclick="addToDisplay('4')">4</button>
<button onclick="addToDisplay('5')">5</button>
<button onclick="addToDisplay('6')">6</button>
<button onclick="addToDisplay('-')">-</button>
</div>
<div>
<button onclick="addToDisplay('1')">1</button>
<button onclick="addToDisplay('2')">2</button>
<button onclick="addToDisplay('3')">3</button>
<button onclick="addToDisplay('*')">*</button>
</div>
<div>
<button onclick="addToDisplay('0')">0</button>
<button onclick="clearDisplay()">C</button>
<button onclick="calculate()">=</button>
<button onclick="addToDisplay('/')">/</button>
</div>
<script>
const display = document.getElementById('display');
function addToDisplay(value) {
display.value += value;
}
function clearDisplay() {
display.value = '';
}
function calculate() {
try {
display.value = eval(display.value);
} catch (error) {
display.value = 'Error';
}
}
</script>
</body>
</html>
使用畫面: